<template>
  <h1>hooks函数</h1>
  <table border="1" :style="{ width: w + 'px' }">
    <thead>
      <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>爱好</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="i in 6">
        <td>⼩橘猫</td>
        <td>11</td>
        <td>⼥</td>
        <td>吃饭</td>
      </tr>
    </tbody>
  </table>
  <teleport to="#app">
    <span>1234567890</span>
  </teleport>
</template>

<script setup lang="ts">
import {useResize} from "@/hooks/useResize";
defineOptions({
    name:"hooks",
    inheritAttrs:false
})

// 对象的解构语法来获取数据
let {w}=useResize();


</script>

<style scoped>
table {
  margin: auto;
}
</style>


<!-- hooks使用注意事项：
    1.具备可复用功能，才需要抽离为独立的hooks函数文件
    2.函数名/文件名以use开头，比如：useXXX.ts
    3.引用时需要将响应式变量或者方法解构暴露出来
-->

<!-- hooks的优点：
    1.hooks作为有独立逻辑的组件封装，其内部的属性、函数等和外部组件具有响应式依附的作用
    2.使用方便，容易上手
    3.使用Vue3的组合式API，封装方便，可复用性高

-->